<template>
  <div class="about">
    <div class="about-header">
      <h1>关于书法展览</h1>
      <p class="subtitle">传承千年文化，展现笔墨风华</p>
    </div>

    <div class="about-content">
      <div class="intro-section">
        <h2>展览介绍</h2>
        <p>本次书法展览汇集了来自全国各地书法名家的精品力作，展示了中国书法艺术的深厚底蕴和时代风采。展览分为古代经典、近现代名家和当代新锐三个板块，共展出作品200余件。</p>
        <p>书法作为中华民族独特的艺术形式，承载着深厚的文化内涵和审美价值。从甲骨文、金文到篆、隶、楷、行、草诸体，书法艺术在历史长河中不断发展演变，形成了丰富多彩的艺术风格。</p>
      </div>

      <div class="history-section">
        <h2>书法艺术简史</h2>
        <div class="timeline">
          <div class="timeline-item">
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <h3>先秦时期</h3>
              <p>甲骨文、金文的出现标志着汉字书法的起源，为后世书法发展奠定了基础。</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <h3>秦汉时期</h3>
              <p>小篆统一了文字书写规范，隶书的出现标志着古今文字的分水岭。</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <h3>魏晋南北朝</h3>
              <p>楷书、行书、草书逐渐成熟，王羲之被誉为"书圣"，其《兰亭序》成为行书典范。</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <h3>隋唐时期</h3>
              <p>楷书达到鼎盛，欧阳询、颜真卿、柳公权等大家辈出，形成不同的楷书风格。</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <h3>宋元明清</h3>
              <p>书法注重个性表达，苏轼、黄庭坚、米芾、蔡襄等"宋四家"开创新风。</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <h3>近现代</h3>
              <p>在继承传统的基础上，书法家们融入时代特色，形成多样化的艺术风格。</p>
            </div>
          </div>
        </div>
      </div>

      <div class="styles-section">
        <h2>主要书体介绍</h2>
        <div class="styles-grid">
          <div class="style-card">
            <h3>篆书</h3>
            <p>包括大篆和小篆，笔法圆转，结构严谨，具有古朴典雅的美感。</p>
          </div>
          <div class="style-card">
            <h3>隶书</h3>
            <p>由篆书演变而来，笔画波磔分明，字形扁平，具有庄重典雅的风格。</p>
          </div>
          <div class="style-card">
            <h3>楷书</h3>
            <p>又称正书、真书，笔画工整，结构严谨，是学习书法的基础书体。</p>
          </div>
          <div class="style-card">
            <h3>行书</h3>
            <p>介于楷书和草书之间，既工整易识又流畅美观，实用性强。</p>
          </div>
          <div class="style-card">
            <h3>草书</h3>
            <p>笔画简省连绵，结构省略，书写快捷，具有强烈的艺术表现力。</p>
          </div>
        </div>
      </div>

      <div class="organizers-section">
        <h2>主办单位</h2>
        <div class="organizers">
          <div class="organizer">
            <h3>中国书法家协会</h3>
            <p>负责组织全国书法展览、学术研讨和书法教育推广工作。</p>
          </div>
          <div class="organizer">
            <h3>国家博物馆</h3>
            <p>提供展览场地和古代书法文物支持。</p>
          </div>
          <div class="organizer">
            <h3>文化部艺术司</h3>
            <p>负责展览的指导和政策支持。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 关于页面不需要特殊的数据处理
</script>

<style scoped>
.about {
  width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.about-header {
  text-align: center;
  margin-bottom: 3rem;
}

.about-header h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.subtitle {
  font-size: 1.2rem;
  color: #666;
}

.about-content {
  background: white;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.intro-section,
.history-section,
.styles-section,
.organizers-section {
  margin-bottom: 3rem;
}

.intro-section h2,
.history-section h2,
.styles-section h2,
.organizers-section h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #333;
  border-bottom: 2px solid #667eea;
  padding-bottom: 0.5rem;
}

.intro-section p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 1.5rem;
}

.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #667eea;
}

.timeline-item {
  position: relative;
  margin-bottom: 2rem;
}

.timeline-marker {
  position: absolute;
  left: -2.7rem;
  top: 0.5rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #667eea;
  border: 3px solid white;
  box-shadow: 0 0 0 2px #667eea;
}

.timeline-content h3 {
  margin: 0 0 0.5rem 0;
  color: #333;
}

.timeline-content p {
  color: #666;
  line-height: 1.6;
}

.styles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.style-card {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.style-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.style-card h3 {
  margin: 0 0 1rem 0;
  color: #667eea;
}

.style-card p {
  color: #666;
  line-height: 1.6;
}

.organizers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.organizer {
  background: #e3f2fd;
  padding: 1.5rem;
  border-radius: 10px;
}

.organizer h3 {
  margin: 0 0 1rem 0;
  color: #1976d2;
}

.organizer p {
  color: #555;
  line-height: 1.6;
}
</style>